<template>
  <div class="app-container">
    <ProTable
      :columns.sync="columns"
      :showSearch.sync="showSearch"
      :getList="getList"
      :loading="loading"
      :resetQuery="resetQuery"
      :tableData="tableData"
    >
      <template #pagination>
        <pagination
          v-show="total > 0"
          :total="total"
          :page-sizes="[10, 20, 50, 100, 200, 300, 500]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="name">
              <el-input
                :placeholder="$t('批次名')"
                clearable
                v-model="queryParams.name"
                @keyup.enter.native="getList"
              />
            </el-form-item>

            <!--<el-form-item prop="status">
              <el-select clearable filterable @change="getList" :placeholder="$t('状态')" v-model="queryParams.status">
                <!~~ 1 待配送 2 配送中 3 已完成 ~~>
                <el-option :label="$t('待配送')" value="1" />
                <el-option :label="$t('配送中')" value="2" />
                <el-option :label="$t('已完成')" value="3" />
              </el-select>
            </el-form-item>-->
          </el-row>
        </el-form>
      </template>
      <template #actions> </template>
      <template #completeNum="{ row }">
        <div>{{ row.completeNum }}/{{ row.num }}</div>
      </template>
      <template #status="{ row }">
        <!-- 1待配送 2配送中 3已完成 -->
        <div v-if="row.status == 1" :style="{ color: $randomColor(row.status) }">{{ $t('待配送') }}</div>
        <div v-if="row.status == 2" :style="{ color: $randomColor(row.status) }">{{ $t('配送中') }}</div>
        <div v-if="row.status == 3" :style="{ color: $randomColor(row.status) }">{{ $t('已完成') }}</div>
      </template>
      <template #option="{ row }">
        <el-dropdown @command="(command) => handleCommand(command, row)">
          <span class="el-dropdown-link">
            {{ $t('更多') }}
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="handleDetail">
              {{ $t('查看') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </ProTable>
    <!-- 选择路线查询 -->
    <SelectRoute :show.sync="selectRoute.show" :routes="selectRoute.routes" @select="getSelectList" />
  </div>
</template>

<script>
import { Loading } from 'element-ui'
import { myUnCompleteList, myList } from '@/api/orderManage/myDispatch'
import SelectRoute from './components/selectRoute.vue'
export default {
  components: { SelectRoute },
  data() {
    return {
      /**选择路线查询 */
      selectRoute: {
        show: false,
        routes: [],
      },
      /**新增&修改弹窗 */
      detail: {
        show: false,
        type: '',
        formData: {},
      },
      // 批次 负责人 包裹号 地址 派送状态 送货人 送达时间 操作
      /**@type {ProTableColumns}*/
      columns: [
        { label: '批次名', prop: 'name' },
        { label: '完成数/包裹数', prop: 'completeNum', useSlot: true },
        { label: '操作', prop: 'option', fixed: 'right', useSlot: true },
      ],
      /**字典数据 */
      dict_type_list: [],
      /**显示搜索*/
      showSearch: false,
      /**表格数据 */
      tableData: [],

      /**数据总条数 */
      total: 0,
      /**表格加载状态 */
      loading: false,
      /**
       * @type {import('element-ui/types/loading').ElLoadingComponent}
       */
      loadingInstance: null,
      /**查询参数 */
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        xx2: '',
      },
    }
  },
  created() {
    this.getList()
    this.getDictList()
  },
  methods: {
    getSelectList(routeId) {
      myList({ routeId }).then((res) => {
        this.tableData = res.rows
      })
    },
    /**获取字典数据 */
    getDictList() {
      // this.useDict('dict_type').then(({ dict_type }) => (this.dict_type_list = dict_type))
    },
    handleCommand(command, row) {
      this[command](row)
    },

    handleDetail(row) {
      const router = this.$router.resolve({
        path: '/googleMap',
        query: {
          routeId: row.id,
        },
      })
      window.location.href = router.href
    },

    handleDelete(row) {
      this.$confirm(this.$t('确认删除?'), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          // api(row.id).then((res) => {
          //   if (res.code == 200) {
          //     this.$message({ type: 'success', message: res.msg })
          //     this.getList()
          //   }
          // })
        })
        .catch((e) => e)
    },
    startLoading() {
      this.loadingInstance = Loading.service({
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      })
    },
    endLoading() {
      this.loadingInstance?.close()
    },
    relaod() {
      this.getList()
    },

    handleGetList() {},

    /** 查询菜单列表 */
    getList() {
      myUnCompleteList().then((res) => {
        const { rows, total } = res
        this.tableData = rows
        this.total = total
        if (total == 0) return this.$message({ type: 'error', message: this.$t('暂无派送任务') })
        if (total == 1) {
          const router = this.$router.resolve({
            path: '/googleMap',
            query: {
              routeId: rows[0].id,
            },
          })
          window.location.href = router.href
        }
        if (total > 1) {
          this.selectRoute.show = true
          this.selectRoute.routes = rows
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = null))
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss"></style>
